altTab: use 'selected' pseudo-style for selected item

This makes it consistent with other parts of the UI and will let the
a11y code use the rule "has_style_pseudo_class('selected') =>
ATK_STATE_SELECTED"

https://bugzilla.gnome.org/show_bug.cgi?id=637830

diff --git a/data/theme/gnome-shell.css b/data/theme/gnome-shell.css
index 72c672da4f7285a582800f58ba7e56f35e1998d7..c5a97db4abafa5e6d76910129902751f8ea0dd95 100644 (file)
--- a/data/theme/gnome-shell.css
+++ b/data/theme/gnome-shell.css
@@ -993,6 +993,15 @@ StTooltip StLabel {
     border-radius: 8px;
 }
 
+.switcher-list .item-box:outlined {
+    padding: 6px;
+    border: 2px solid rgba(85,85,85,1.0);
+}
+
+.switcher-list .item-box:selected {
+    background: rgba(255,255,255,0.33);
+}
+
 .switcher-list .thumbnail-box {
     padding: 2px;
     spacing: 4px;
@@ -1002,18 +1011,6 @@ StTooltip StLabel {
     width:  256px;
 }
 
-.switcher-list .outlined-item-box {
-    padding: 6px;
-    border: 2px solid rgba(85,85,85,1.0);
-    border-radius: 8px;
-}
-
-.switcher-list .selected-item-box {
-    padding: 8px;
-    border-radius: 8px;
-    background: rgba(255,255,255,0.33);
-}
-
 .switcher-list .separator {
     width: 1px;
     background: rgba(255,255,255,0.33);

diff --git a/js/ui/altTab.js b/js/ui/altTab.js
index 824c1b0979a0dd7d542f3639dfd0a4cf52ffdcb5..ca2b902be94e215d6ee31ca32b51a667c012070e 100644 (file)
--- a/js/ui/altTab.js
+++ b/js/ui/altTab.js
@@ -604,16 +604,18 @@ SwitcherList.prototype = {
     },
 
     highlight: function(index, justOutline) {
-        if (this._highlighted != -1)
-            this._items[this._highlighted].style_class = 'item-box';
+        if (this._highlighted != -1) {
+            this._items[this._highlighted].remove_style_pseudo_class('outlined');
+            this._items[this._highlighted].remove_style_pseudo_class('selected');
+        }
 
         this._highlighted = index;
 
         if (this._highlighted != -1) {
             if (justOutline)
-                this._items[this._highlighted].style_class = 'outlined-item-box';
+                this._items[this._highlighted].add_style_pseudo_class('outlined');
             else
-                this._items[this._highlighted].style_class = 'selected-item-box';
+                this._items[this._highlighted].add_style_pseudo_class('selected');
         }
 
         let monitor = global.get_primary_monitor();
@@ -859,9 +861,11 @@ AppSwitcher.prototype = {
         while(this._items.length > 1 && this._items[j].style_class != 'item-box') {
                 j++;
         }
-        let iconPadding = this._items[j].get_theme_node().get_horizontal_padding();
+        let themeNode = this._items[j].get_theme_node();
+        let iconPadding = themeNode.get_horizontal_padding();
+        let iconBorder = themeNode.get_border_width(St.Side.LEFT) + themeNode.get_border_width(St.Side.RIGHT);
         let [iconMinHeight, iconNaturalHeight] = this.icons[j].label.get_preferred_height(-1);
-        let iconSpacing = iconNaturalHeight + iconPadding;
+        let iconSpacing = iconNaturalHeight + iconPadding + iconBorder;
         let totalSpacing = this._list.spacing * (this._items.length - 1);
         if (this._separator)
            totalSpacing += this._separator.width + this._list.spacing;